<template>
	<h2>集成ts与compositionAPI一起使用</h2>
	<h4>姓名:{{uname}}</h4>
	<h4>兴趣:{{hobby}}</h4>
	<h4>年龄:{{age}}</h4>
	<h5>getUNname:{{getUNname(111)}}</h5>
	<p>{{count}}</p>
	<button @click="setCount()">setCount</button>
</template>

<script lang="ts">
	//defineComponent 启用类型校验
	import {defineComponent,reactive,toRefs,ref} from 'vue'
	//约束data中的属性与方法
	interface user{
		uname:string,	
		hobby:string,
		age:number,
		getUNname(msg:string):string
	}
	export default defineComponent ({
		setup(){
			//  三种方式：  :  <>  as
			const data:user = reactive({
				uname:"肖雅涵",
				hobby:"舞蹈",
				age:20,
				getUNname(msg){
					return msg
				}
			})
			//不支持:这种方式约束类型
			// const count:number = ref(0)
			const count= ref<number>(0)
			function setCount(){
				count.value = 123
			}
			return{
				...toRefs(data),count,setCount
			}
		}
	})
</script>
<style>
</style>
